import React, { VFC, useEffect, useState } from "react"
import { Input, Button, Popconfirm, TablePaginationConfig, Space, message, Table } from 'antd';

import { getProjectIssuePhaseList, } from '@services/index';
import { useRecoilValue } from 'recoil';
import { fetchProjectAllList, fetchPhaseAllList, fetchProjectIssueAllList } from '@selectors/selectProduct';
import { GetDIC } from '@api/index'

import Edit from './edit';
import MySelect from './mySelect';
import PageContent from '@layout/PageContent';

type EType = React.MouseEvent<HTMLElement, MouseEvent> | React.SetStateAction<boolean>

const Group:VFC = () => {
    const [isVisible, setIsVisible] = useState<boolean>(false);
    const [dataInfo, setDataInfo] = useState<any>(null);
    const DIC_yesornoStatus = GetDIC('yesornoStatus');
    let [projectId, setProjectId] = useState<string|undefined>(undefined);
    let [issueId, setIssueId] = useState<string|undefined>(undefined);
    const [dataList, setDataList] = useState<any[]>([]);
    const [issuePhaseAll, setIssuePhaseAll] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false)
    const [pagination, setPagination] = useState<TablePaginationConfig>({
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共 ${total} 条 `,
    });

    useEffect(()=>{
        initData();
    },[]);
    // 获取列表 数据
    const initData= async () =>{
        setLoading(true)
        try{
            const { data, status } = await getProjectIssuePhaseList({
                pageNum:pagination.current,
                pageSize:pagination.pageSize,
                projectId: projectId,
                issueId: issueId
            })
            if(status === '0'){
                const {list, total} = data
                setDataList(list);
                setPagination({
                    ...pagination,
                    total
                });
            }
        }finally{
            setLoading(false)
        }
    }
    // 编辑
    const handleEdit = (type: string,e?: EType) => {
        if(type == 'add') {
            setDataInfo(null);
        }else{
            setDataInfo(e);
        }
        setTimeout(()=>{
            setIsVisible(true)
        })
    }

    // 触发分页
    const onTableChange = (page:TablePaginationConfig) => {
        pagination.current = page.current
        pagination.pageSize = page.pageSize
        setPagination({...pagination})
        initData();
    }
    const renderSearch = () => (
        <div className="box-search dflex br2">
            <div className="search-items dflex">
                <div className="_items dflex">
                    <label>所属项目</label>
                    <MySelect dataList={useRecoilValue(fetchProjectAllList)} mode={undefined} type='project' onChange={e => setProjectId(e)} />
                </div>
                <div className="_items dflex">
                    <label>所属期数</label>
                    <MySelect  dataList={useRecoilValue(fetchProjectIssueAllList)} mode={undefined} type='issue' onChange={e => setIssueId(e)} />
                </div>
            </div>
            <div className="btns">
                <Button type="primary" onClick={initData}>查询</Button>
                {/* <Button className="mgL10" onClick={() => handleEdit('add')}>添加</Button> */}
            </div>
        </div>
    )
    // 表格列名称
    const columns:any = [
        { title: '所属项目', dataIndex: 'projectName'},
        { title: '项目阶段', dataIndex: 'phaseName'},
        { title: '期数', dataIndex: 'issueName' },
        { title: '开始时间', dataIndex: 'startDay' },
        { title: '结束时间', dataIndex: 'endDay'},
        { title: '是否开启', dataIndex: 'status', render: (text: number) => DIC_yesornoStatus[text]},
        { title: '操作', dataIndex: 'operation', align: 'center', render: (_: unknown, record: any) => (
            <Space size={8}>
                <a onClick={() => handleEdit('edit',record)}>编辑</a>
            </Space>
        )}
    ]
    return (
        <>
            {renderSearch()}
            <PageContent title={'期数时间管理'}>
                <Table 
                    rowKey={({id})=> id}
                    bordered
                    columns={columns} 
                    dataSource={dataList}
                    onChange={onTableChange}
                    pagination={pagination}
                    loading={loading}
                    scroll={{ x: 0 }}
                />
            </PageContent>
            {isVisible && <Edit dataInfo={dataInfo} isVisible={isVisible} onCancel={()=>{
                setIsVisible(false)
                initData()
            }} />}
        </>
    )
}
export default Group
